<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>周边商圈</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style type="text/css">
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .mui-plus .plus{
            display: inline;
        }

        .plus{
            display: none;
        }

        #topPopover {
            position: fixed;
            top: 16px;
            right: 6px;
        }
        #topPopover .mui-popover-arrow {
            left: auto;
            right: 6px;
        }
        p {
            text-indent: 22px;
        }
        /*span.mui-icon {*/
            /*font-size: 14px;*/
            /*color: #007aff;*/
            /*margin-left: -15px;*/
            /*padding-right: 10px;*/
        /*}*/
        .mui-popover {
            height: 300px;
        }
    </style>
    <script src="__TMPL__/public/assets/wuye/js/mui.min.js"></script>
    <link href="__TMPL__/public/assets/wuye/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/wuye/css/app.css" />
    <script src="__TMPL__/public/assets/wuye/js/iconfont.js"></script>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-left-nav mui-pull-left" href="javascript:window.history.go(-1);"></a>
    <!--<h1 class="mui-title"><input type="search" class="mui-input-clear" placeholder=""></h1>-->
    <a href="#middlePopover" class="mui-icon mui-icon-arrowdown mui-pull-right"></a>
</header>
{:widget('Wuye/nav')}
<div class="mui-content">
    <div id="middlePopover" class="mui-popover">
        <div class="mui-popover-arrow"></div>
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <notempty name="mcate">
                        <li class="mui-table-view-cell"><a href="{:url('portal/wuye/meituan')}">全部</a></li>
                        <volist name="mcate" id="voMcate">
                            <li class="mui-table-view-cell"><a href="{:url('portal/wuye/meituan',['id'=>$voMcate['id']])}">{$voMcate.name}</a></li>
                        </volist>
                    </notempty>
                </ul>
            </div>
        </div>
    </div>
    <ul class="mui-table-view" id="cont">
        <notempty name="mo">
            <volist name="mo" id="mo">
                <if condition="$mo.is_shang eq 1">
                    <li class="mui-table-view-cell mui-media">
                        <a href="{$mo.url|default=''}">
                            <notempty name="$mo['imgsuo']">
                                <img class="mui-media-object mui-pull-left" src="<?php echo cmf_get_image_url($mo['imgsuo'])?>" style="max-width: 100px;width: 100px;max-height: 100px;height: 100px;">
                            </notempty>

                            <div class="mui-media-body" style="text-align: left;padding-top: 5px;padding-right: 20px;">
                                {$mo.name|default=''}

                                <p class='mui-ellipsis' style="margin-top: 5px;color:rgb(6,193,174);font-weight:700">
                                    {$mo.phone|default=''}
                                </p>
                                <p class='mui-ellipsis' style="margin-top: 5px;">
                                    <volist name="mcate" id="list">
                                        <if condition="$list.id eq $mo.cate_id">{$list.name}</if>
                                    </volist>
                                </p>
                                <p class='mui-ellipsis' style="margin-top: 5px;">
                                    {$mo.pName|default=''}{$mo.cityName|default=''}{$mo.areaName|default=''}
                                    {$mo.jiedao|default=''}
                                </p>
                                <span style="position: absolute;right: 1rem;top: 40%;color: orange;font-weight: bold;">商家</span>
                            </div>
                        </a>
                    </li>
                <else />
                    <li class="mui-table-view-cell mui-media">
                    <a href="{:url('portal/wuye/meituandetail',['id'=>$mo['id']])}">
                        <notempty name="$mo['imgsuo']">
                            <img class="mui-media-object mui-pull-left" src="<?php echo cmf_get_image_url($mo['imgsuo'])?>" style="max-width: 100px;width: 100px;max-height: 100px;height: 100px;">
                        </notempty>

                        <div class="mui-media-body" style="text-align: left;padding-top: 5px;padding-right: 20px;">
                            {$mo.name|default=''}

                            <p class='mui-ellipsis' style="margin-top: 5px;color:rgb(6,193,174);font-weight:700">
                                {$mo.phone|default=''}
                            </p>
                            <p class='mui-ellipsis' style="margin-top: 5px;">
                                <volist name="mcate" id="list">
                                    <if condition="$list.id eq $mo.cate_id">{$list.name}</if>
                                </volist>
                            </p>
                            <p class='mui-ellipsis' style="margin-top: 5px;">
                                {$mo.pName|default=''}{$mo.cityName|default=''}{$mo.areaName|default=''}
                                {$mo.jiedao|default=''}
                            </p>

                        </div>
                    </a>
                </li>
                </if>
            </volist>
        </notempty>
    </ul>
</div>
</body>
<script src="__TMPL__/public/assets/wuye/js/iconfont.js"></script>
<script src="__TMPL__/public/assets/wuye/js/mui.picker.js"></script>
<script src="__TMPL__/public/assets/wuye/js/mui.poppicker.js"></script>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
</script>
<script>
    mui.init();

    mui('.mui-scroll-wrapper').scroll();
    mui('body').on('shown', '.mui-popover', function(e) {
        //console.log('shown', e.detail.id);//detail为当前popover元素
    });
    mui('body').on('hidden', '.mui-popover', function(e) {
        //console.log('hidden', e.detail.id);//detail为当前popover元素
    });
</script>
</html>